<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">

</head>
<body>
<div id="app">

    <el-button @click="addUI" type="primary">新增</el-button>
    <!--
        :data： 绑定表格对应的数据
        stripe; 是否斑马纹显示
    -->
    <el-table :data="tableData" stripe style="width: 100%">
        <!--
         type="index" ：类型为行的索引
         label： 表头

        注意：索引不是集合中的id
        -->
        <el-table-column
                type="index"
                label="序号"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                prop="name"
                label="商品名称"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格" align="center">
        </el-table-column>
        <el-table-column
                prop="stock"
                label="库存" align="center">
        </el-table-column>
        <el-table-column
                prop="description"
                label="描述" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
            <!--
                slot-scope：作用域插槽，可以获取表格数据
                scope：代表表格数据(tableData)
                可以通过scope.row来获取表格当前行数据，scope不是固定写法
                @click：绑定vue中的方法
            -->
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--
        分页组件
          @size-change： 当改变每页条数时触发的钩子函数
          @current-change：当改变页码时触发的钩子函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            current-page="1"
            :page-sizes="[1,3, 5, 8, 10]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <!--添加商品的弹窗-->
    <!--@close : 关闭窗口时回调-->
    <el-dialog title="添加商品" :visible.sync="dialogTableVisible" @close="resetForm('addForm')">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品名称" prop="name">
                <!--v-model : 双向绑定 -->
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price" style="text-align: left;">
                <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                <el-input v-model="formData.price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="stock">
                <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                <el-input v-model.number="formData.stock" precision="2"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="formData.description"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="add('addForm')">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--修改商品的弹窗-->
    <!--@close : 关闭窗口时回调-->
    <el-dialog title="修改商品" :visible.sync="dialogTableVisible4Edit" @close="resetForm('editForm')">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="formData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品名称" prop="name">
                <!--v-model : 双向绑定 -->
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price" style="text-align: left;">
                <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                <el-input v-model="formData.price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="stock">
                <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                <el-input v-model.number="formData.stock" precision="2"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="formData.description"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="edit('addForm')">修改</el-button>
                <el-button @click="resetForm('editForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<style type="text/css">
    /* 设置分页组件在右侧显示 */
    .el-pagination {
        text-align: right;
        padding: 15px;
    }
</style>
<script src="js/vue-v2.6.10.js"></script>
<script src="element-ui-2.13.0/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    //自定义价格的校验规则
    //import pagination from "./element-ui-2.13.0/packages/pagination/src/pagination";

    var checkPrice = (rule, value, callback) => {
        //正则表达式： 必须是正整数或者是正浮点数
        var pattern = /^\d+(\.\d+)?$/;
        if (!pattern.test(value)) {
            callback(new Error('请输入整数或者小数！！'));
        } else {
            callback();
        }
    };
    new Vue({
        el: "#app",
        data: {
            tableData: [],// 表格中要展示的数据集合
            pagination: { //分页参数
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            formData: {}, //对应新增和编辑的表单数据
            dialogTableVisible: false, //新增窗口的显示与隐藏
            dialogTableVisible4Edit: false, //编辑窗口的显示与隐藏
            rules: { //校验规则
                name: [
                    {required: true, message: '请输入商品名称', trigger: 'blur'},
                    {min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur'}
                ],
                price: [
                    {required: true, message: '请输入商品价格', trigger: 'blur'},
                    {validator: checkPrice, trigger: 'blur'}
                ],
                stock: [
                    {required: true, message: '请输入库存数量', trigger: 'blur'},
                    {type: 'number', message: '库存数量只能是数字', trigger: 'blur'}
                ]
            }
        },
        //钩子函数，在创建vue对象完成后执行
        created() {
            //创建vue后，分页查询数据
            this.findByPage();
        },
        methods: {
            /**
             * 根据id删除商品
             *  步骤：
             *      1. 弹框提示
             *      2. 确认后删除商品
             *      3. 消息提示
             *      4. 重新查询第一页
             */
            handleDelete(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //点击确认时执行删除操作
                    axios.get("/goods/delById.do?id=" + row.id).then((res) => {
                        console.log(res);
                        //消息提示
                        if (res.data.flag) {
                            this.$message({
                                type: "success",
                                message: res.data.message
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.message
                            });
                        }
                        //重新查询
                        this.findByPage();
                    }).catch((err) => {
                        console.log(err);
                    });
                }).catch(() => {
                    //点击取消时执行
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /**
             * 修改
             *
             */
            edit() {
                axios.post("/goods/edit.do", this.formData).then((res)=>{
                    console.log(res);
                    //关闭窗口
                    this.dialogTableVisible4Edit = false;
                    //重新查询
                    this.findByPage();
                    //消息提示
                    if(res.data.flag){
                        this.$message({
                            type:"success",
                            message:res.data.message
                        });
                    }else{
                        this.$message({
                            type:"error",
                            message:res.data.message
                        });
                    }
                });
            },
            /**
             * 编辑商品回显
             *  1.弹出编辑窗口
             *  2.窗口显示商品信息(从数据库获取信息 findById)
             */
            handleUpdate(row) {
                //1. 弹出窗口
                this.dialogTableVisible4Edit = true;
                //2. 根据id查询商品(id = row.id)
                axios.get("/goods/findById.do?id=" + row.id).then((res) => {
                    console.log(res);
                    //查询到数据赋值给formData
                    this.formData = res.data.result;
                });
            },

            /**
             * 新增弹窗
             *
             */
            addUI() {
                this.dialogTableVisible = true;
            },
            /**
             * 添加
             *
             * @param formName
             */
            add() {
                //发送异步请求
                axios.post("/goods/add.do", this.formData).then((res) => {
                    console.log(res)
                    // 新增完成后:
                    // 1.弹出窗口需要关闭
                    this.dialogTableVisible = false;
                    // 2.重新查询
                    this.findByPage();
                    // 3.提示
                    if (res.data.flag) {
                        this.$message({
                            message: res.data.message
                        });
                    } else {
                        this.$message({
                            message: res.data.message
                        });
                    }

                }).catch((err) => {
                    console.log(err);
                });
            },

            //分页查询
            //post请求方式 url: "/goods/findByPage.do", 请求体: this.pagination //分页参数
            findByPage() {
                axios.post("/goods/findByPage.do", this.pagination).then((response) => {
                    //成功的回调 展示数据
                    console.log(response)
                    //展示数据
                    //把商品列表赋值给 tableData
                    this.tableData = response.data.result.goodsList;
                    //把总条数赋值 pagination.total
                    this.pagination.total = response.data.result.total;

                }).catch((err) => {
                    console.log(err)
                });
            }
            ,
            //改变每页条数时执行的钩子
            handleSizeChange(pageSize) {
                this.pagination.pageSize = pageSize;
                //再次查询
                this.findByPage();
            }
            ,
            //改变页码时执行的钩子
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                //再次查询
                this.findByPage();
            }
        }
    })
    ;
</script>
</html>